<template>
    <div id="register">
        <p class="register-mark"></p>
        <h2 class="title">江苏天地商业银行</h2>
        <div class="register-content">
            <p class="register-content-beijing"></p>
            <p class="register-content-title">银行OA系统注册</p>
            <div class="register-content-body">
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="register-ruleForm">
                    <el-form-item prop="empName">
                        <el-input placeholder="Name" v-model="ruleForm.empName" class="empName_input">
                            <template slot="prepend"><i class="el-icon-s-custom"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="empCode">
                        <el-input placeholder="Code" v-model="ruleForm.empCode" class="empCode_input">
                            <template slot="prepend"><i class="el-icon-s-custom"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="empPassword">
                        <el-input placeholder="password" v-model="ruleForm.empPassword" class="empPassword_input">
                            <template slot="prepend"><i class="el-icon-key"></i></template>
                        </el-input>
                    </el-form-item>

                    <el-form-item>
                      <router-link to="/login" class="loginText">
                        <p>已有账号，立即登录</p></router-link>
                    </el-form-item>

                    <el-form-item>
                        <el-button class="submitBtn" @click="submitForm('ruleForm')">Register</el-button>
                    </el-form-item>
                </el-form> 
            </div>
        </div>
    </div>
</template>

<script>
import { register } from '@/api/register';

export default({
    name:"MyRegister",
    data(){
        return{
            ruleForm: {
                userCode: "",
                userPassword: "",
                empName:"",
            },
            rules: {
                empName: [
                    { required: true, message: "请输入用户姓名", trigger: "blur" },
                    {
                        min: 2,
                        max: 12,
                        message: "长度在 2 到 12 个字符",
                        trigger: "blur",
                    },
                ],
                empCode: [
                    { required: true, message: "请输入用户账号", trigger: "blur" },
                    {
                        min: 2,
                        max: 16,
                        message: "长度在 2 到 16 个字符",
                        trigger: "blur",
                    },
                ],
                empPassword: [
                    { required: true, message: "请输入用户密码", trigger: "blur" },
                    {
                        min: 5,
                        max: 10,
                        message: "长度在 5 到 10 个字符",
                        trigger: "blur",
                    },
                ],
            },
        };  
    },
    methods: {
        submitForm() {
            register(this.ruleForm).then(res => {
                console.log(res)
                if (res.code === '0000') {
                  this.$router.push('/login')
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
    },
})
</script>


<style scoped>
*{
    margin: 0px;
    padding: 0px;
}
#register{
    width: 100%;
    height: 762px;
    background-image: url("/src/assets/register-body.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -3px;
    left: -3px;
}
.register-mark{
    width: 80px;
    height: 80px;
    /* border: 2px solid gray; */
    position: absolute;
    top: 105px;
    left: 240px;
    background-image: url("/src/assets/login-mark.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.title{
    color: #000000;
    font-size: 50px;
    font-family: '宋体';
    font-weight: bolder;
    position: absolute;
    top: 120px;
    left: 350px;
}

.register-content{
    width: 400px;
    height: 320px;
    border: 8px solid #c41212;
    background-color: white;
    position: absolute;
    top: 210px;
    left: 1050px;
}
.register-content-beijing{
    width: 400px;
    height: 320px;
    background-image: url("/src/assets/login-content.png");
    opacity: 0.1;
}
.register-content-title{
    height: 80px;
    line-height: 80px;
    font-size: 25px;
    text-align: center;
    font-family: '宋体';
    font-weight: bold;
    position: relative;
    top: -320px;
}
.register-content-body{
    height: 240px;
    position: relative;
    top: -320px;
}

.empName_input{
    width: 260px;
    height: 39px;
    line-height: 39px;
    /* border: 1px solid gray; */
    border-radius: 0px 5px 5px 0px;
    position: relative;
    top: -10px;
    left: -28px;
}
.empCode_input{
    width: 260px;
    height: 39px;
    line-height: 39px;
    /* border: 1px solid gray; */
    border-radius: 0px 5px 5px 0px;
    position: relative;
    top: -15px;
    left: -28px;
}

.empPassword_input{
    width: 260px;
    height: 39px;
    line-height: 39px;
    /* border: 1px solid gray; */
    border-radius: 0px 5px 5px 0px;
    position: relative;
    top: -20px;
    left: -28px;
}

.loginText{
  color: rgb(0, 0, 0);
  font-size: 12px;
  position: relative;
  top: -45px;
  left: 120px;
  text-decoration: none;
}
.loginText:hover{
  color: rgb(248, 199, 125);
}
.submitBtn{
    width: 200px;
    position: relative;
    top: -70px;
    font-size: 20px;
}
.submitBtn:hover{
    color: white;
    background-color: rgb(247, 186, 159);
}
</style>